import React, { Component } from 'react'
import "./TabControl.css"
export class TabControl extends Component {
  constructor(){
    super()
    this.state = {
      currentIndex: 0
    }
  }
  itemClick(index){
    this.props.tabClick(index)
    this.setState(
      {
        currentIndex: index
      }
    )
  }
render() {
    const { titles,itemType } = this.props
    const {currentIndex} = this.state
    return (
      <div className='tab-content'>
        {titles.map((value, index, array) => {
            return (
                <div className={`item ${index === currentIndex?'active':''}`} key={index} onClick={e=>this.itemClick(index)}>
                  {/* <span className='text'>{value}</span> */}
                  {itemType(value)}
                </div>
            )
        })}  
      </div>
    )
  }
}

export default TabControl